import { useState } from "react";
import Input, { type InputStatus } from "@/components/Input";
import Panel from "@/components/Panel";
import Radio from "@/components/Radio";
import RadioGroup from "@/components/RadioGroup";

const sizes: Size[] = ["xs", "sm", "md", "lg", "xl"];
const stats: InputStatus[] = [
  "ghost",
  "neutral",
  "primary",
  "secondary",
  "accent",
  "info",
  "success",
  "warning",
  "error",
];

export default function Inputs() {
  const [size, setSize] = useState<Size | undefined>();
  const [status, setStatus] = useState<InputStatus | undefined>();
  const [prefix, setPrefix] = useState<boolean | undefined>();
  const [suffix, setSuffix] = useState<boolean | undefined>();

  return (
    <Panel title="Inputs" className="bg-white">
      <div className="flex flex-col gap-4">
        <div className="flex gap-4 ">
          Size:
          <RadioGroup
            options={sizes.map((s) => ({ label: s, value: s }))}
            value={size}
            onChange={(v) => setSize(v as Size)}
          />
        </div>
        <div className="flex gap-4 ">
          Status:
          <RadioGroup
            options={stats.map((s) => ({ label: s, value: s }))}
            value={status}
            onChange={(v) => setStatus(v as InputStatus)}
          />
        </div>
        <div className="flex gap-4 ">
          Prefix:
          <Radio checked={prefix} onChange={(v) => setPrefix(v)} />
        </div>
        <div className="flex gap-4 ">
          Suffix:
          <Radio checked={suffix} onChange={(v) => setSuffix(v)} />
        </div>

        <div className="flex flex-col gap-4">
          <Input
            size={size}
            status={status}
            placeholder={size}
            prefix={prefix ? "🔍" : undefined}
            suffix={
              suffix ? (
                <>
                  <kbd className="kbd kbd-sm">⌘</kbd>
                  <kbd className="kbd kbd-sm">K</kbd>
                </>
              ) : undefined
            }
          />
        </div>
      </div>
    </Panel>
  );
}
